Bootstrap inne style na różnych rozdzielczościach

Bóbr. · 7 Czerwca 2017

Witam.
Zaczynam dopiero swoją przygodę z bootstrapem i napotkałem pewien problem, który tak jakby nie pozwala mi ruszyć dalej z rozwojem moich projektyów (jak i umijętności).

Nie przeciągając i przechodząc do meritum:

Posiadamy jeden elemnt <div>, który na rozdzielczości col-md-12 ma miec inne style a na col-xs-12 inne.

<div class="logo col-md-12 col-xs-12">

Przy rozdzielczości COL-MD-12 obrazek w htmlu <img src=""> ma być wycentrowany i z marginesami po bokach, natomias przy COL-XS-12 ma być rozciągnięty na całą szerokość ekranu.

Myślałem żeby to zrobić w taki sposób:

.logo .col-md-12{ style }
.logo .col-xs-12{style}

(zadziała to w ogóle tak jak powinno?)

Tylko, że wtedy nie wiem jak zrobić żeby <img src> rozszerzylo sie na caly ekran

Latreso · 7 Czerwca 2017

Na stronie http://getbootstrap.com/css/#grid możesz znaleźć:


/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Jest to informacja o tym jak bootstrap używa media queries do obsługi różnych rozdzielczości (a zarazem informacja do http://lesscss.org/ [ale o tym jeszcze się kiedyś pouczysz ] )

Aby móc z tego skorzyystać należy nieco przekształcić:


/* Tu CSS dla -xs (phone) */

@media (min-width: 768px) { 
	/* tu CSS dla -sm (tablet) */
}

@media (min-width: 992px) { 
	/* tu CSS dla -md (small desktop) */
}

@media (min-width: 1200px) { 
	/* tu CSS dla -lg (desktop) */
}

Przykład zastosowania:

#logo { /* 1 */
  width:200px;
  height:100px
}

@media (min-width: 768px) { 
  #logo { /* 2 */
    width:300px;
    height:150px
  }
}

@media (min-width: 992px) { 
  #logo { /* 3 */
    margin-left:30px;
  }
}

@media (min-width: 1200px) { 
  #logo { /* 4 */
    width:400px;
    height:200px
  }
}

I tu jeszcze kilka słów wyjaśnienia:

"(1)" oznacza numer w kodzie - "/* 1 */"

W deklaracji (1) jest podana wysokość i szerokość, będzie ona przypisana wszystkim rozdzielczościom

W deklaracji (2) znowu jest podana szerokość i wysokość. Oznacza to, że dla ekranów o rozdzielczości minimum 768px 'zaktualizuje' szerokość elementu #logo.

W deklaracji (3) nie ma podanej już wysokości i szerokosci. Oznacza to, że jest używana najbardziej 'ważna' deklaracja - w tym przypadku (2). Dodatkowo dla rozdzielczości minimum 992px będzie dodatkowy margines lewy dla elementu #logo

W deklaracji (4) ponownie jest ustawiona wysokość i szerokość, oznacza to że dla ekranów o minimum 1200px 'zaktualizuje' przypisane wartości ale jednoczeście zostanie odziedziczony margines lewy

UWAGA - W przypadku korzystania z "min width" należy deklarować wszystko w kolejności od najmniejszych ekranów do największych, w przypadku "max-width" na odwrót.

Dodtyczy to sposobu w jaki działa CSS, ponieważ wszystkie wartości @media mają taki sam priorytet zawsze będzie 'aktywna' ta ostatnia deklaracja

Demonstracja działania przy użyciu języka programowania:

wynik = 10;

if(wielkosc>768){
  wynik = 15;
}

if(wielkosc>992){
  wynik = 20;
}

if(wielkosc>1200){
  wynik = 25;
}

wypisz(wynik);

W przypadku zmiany kolejności "if" kod nie będzie działał jak należy

Bóbr. · 8 Czerwca 2017

20 godzin temu, Latreso napisał:
Na stronie http://getbootstrap.com/css/#grid możesz znaleźć:
Odkryj ukrytą treść
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Jest to informacja o tym jak bootstrap używa media queries do obsługi różnych rozdzielczości (a zarazem informacja do http://lesscss.org/ [ale o tym jeszcze się kiedyś pouczysz ] )

Aby móc z tego skorzyystać należy nieco przekształcić:
Ukryj treść
/* Tu CSS dla -xs (phone) */

@media (min-width: 768px) { 
	/* tu CSS dla -sm (tablet) */
}

@media (min-width: 992px) { 
	/* tu CSS dla -md (small desktop) */
}

@media (min-width: 1200px) { 
	/* tu CSS dla -lg (desktop) */
}
Przykład zastosowania:
Ukryj treść
#logo { /* 1 */
  width:200px;
  height:100px
}

@media (min-width: 768px) { 
  #logo { /* 2 */
    width:300px;
    height:150px
  }
}

@media (min-width: 992px) { 
  #logo { /* 3 */
    margin-left:30px;
  }
}

@media (min-width: 1200px) { 
  #logo { /* 4 */
    width:400px;
    height:200px
  }
}
I tu jeszcze kilka słów wyjaśnienia:

"(1)" oznacza numer w kodzie - "/* 1 */"

W deklaracji (1) jest podana wysokość i szerokość, będzie ona przypisana wszystkim rozdzielczościom

W deklaracji (2) znowu jest podana szerokość i wysokość. Oznacza to, że dla ekranów o rozdzielczości minimum 768px 'zaktualizuje' szerokość elementu #logo.

W deklaracji (3) nie ma podanej już wysokości i szerokosci. Oznacza to, że jest używana najbardziej 'ważna' deklaracja - w tym przypadku (2). Dodatkowo dla rozdzielczości minimum 992px będzie dodatkowy margines lewy dla elementu #logo

W deklaracji (4) ponownie jest ustawiona wysokość i szerokość, oznacza to że dla ekranów o minimum 1200px 'zaktualizuje' przypisane wartości ale jednoczeście zostanie odziedziczony margines lewy

UWAGA - W przypadku korzystania z "min width" należy deklarować wszystko w kolejności od najmniejszych ekranów do największych, w przypadku "max-width" na odwrót.

Dodtyczy to sposobu w jaki działa CSS, ponieważ wszystkie wartości @media mają taki sam priorytet zawsze będzie 'aktywna' ta ostatnia deklaracja
Odkryj ukrytą treść
Demonstracja działania przy użyciu języka programowania:
wynik = 10;

if(wielkosc>768){
  wynik = 15;
}

if(wielkosc>992){
  wynik = 20;
}

if(wielkosc>1200){
  wynik = 25;
}

wypisz(wynik);
W przypadku zmiany kolejności "if" kod nie będzie działał jak należy

Dzięki za szeroką odpowiedź wyczerpującą w sumie temat.
Ale zadam jeszcze pare pytań coby nie zakładać innych tematów:

Rozumiem, że do ogarnięcia bootstrapa trzeba umieć less, bo co komuś daje bootstrap jak nie może zmieniać stylów dla innych rozdzielczości.
Jednakże znalazłem inne rozwiązanie, mianowicie używanie hidden-sm itd. Tylko, że przy tym koniecznie trzeba np. stworzyć w htmlu 2 contenty o róznych stylach.

Kolejne pytanie.

Jeśli mam dużo do ostylowania elemenów i w 1 pliku będzie mi się ciężko pracować, mogę sobie swobodnie zrobić parę plików .css i podlinkować je w head?
Chodzi mi o to czy wpłynie to na szybkość i jakość ładowania strony.

Latreso · 9 Czerwca 2017

23 godziny temu, Bóbr. napisał:

Dzięki za szeroką odpowiedź wyczerpującą w sumie temat.
Ale zadam jeszcze pare pytań coby nie zakładać innych tematów:

1. Rozumiem, że do ogarnięcia bootstrapa trzeba umieć less, bo co komuś daje bootstrap jak nie może zmieniać stylów dla innych rozdzielczości.
2. Jednakże znalazłem inne rozwiązanie, mianowicie używanie hidden-sm itd. Tylko, że przy tym koniecznie trzeba np. stworzyć w htmlu 2 contenty o róznych stylach.

Kolejne pytanie.

3. Jeśli mam dużo do ostylowania elemenów i w 1 pliku będzie mi się ciężko pracować, mogę sobie swobodnie zrobić parę plików .css i podlinkować je w head?
4. Chodzi mi o to czy wpłynie to na szybkość i jakość ładowania strony.

Ad. 1. Less na pewno ułatwia pracę, a że dodatkowo bootstrap jest z nim kompatybilny co znacznie przyspiesza proces tworzenia strony. Nie jest jednak wymagana jego znajomość (ale warto )

Ad. 2. Słuchaj jest wiele rozwiązań, Wszystko zależy od tego w czym pracuje Ci się wygodniej (o ile jakiś sposób znacząco nie wpływa na wydajność lub jest przestarzały)

Czy na pewno 2 contenty?

<nav id="navbar">
  <div id="logo">
    <div id="logo-1" class="visible-xs visible-sm">
      //tu logo dla xs i sm
    </div>
    <div id="logo-2" class="visible-md visible-lg">
      //tu logo dla md i lg
    </div>
  </div>
  <div id="navigation">
  	...
  </div>
</nav>

Ad. 3,4. Pracować możesz jak chcesz, na wydajność (a raczej obciążenie) wpłynie ale w bardzo bardzo niskim stopniu (przy podstawowym ruchu na stronie - niezauważalnym).

I oczywiście, że możesz (a nawet powinienieś) pracować tak aby to Tobie było najwygodniej. Istnieje wiele programów (a nawet konwerterów online), dzięki którym po zakończonej pracy wrzucasz do nich wszystkie pliki, a one automatycznie łączą go w 1.

Możesz też używać widocznych komentarzy (później ewentualnie przepuścić przez jakiś program, który minimalizuje plik, ale to nie jest konieczne)

/*#############################*/
/*                             */
/*           Nagłówek          */
/*                             */
/*#############################*/

#navbar {
  ...
}
#navbar ol {
  ...
}
#logo-1 {
  ...
}
#logo-2 {
  ...
}

/*#############################*/
/*                             */
/*            Stopka           */
/*                             */
/*#############################*/

footer {
  ...
}
footer div {
  ...
}
footer div p {
  ...
}
footer div p span {
  ...
}

//Czemu kolor komentarzy w kodzie źródłowym jest taki sam jak id CSS? xD

Bóbr. · 9 Czerwca 2017

30 minut temu, Latreso napisał:
Ad. 1. Less na pewno ułatwia pracę, a że dodatkowo bootstrap jest z nim kompatybilny co znacznie przyspiesza proces tworzenia strony. Nie jest jednak wymagana jego znajomość (ale warto )

Ad. 2. Słuchaj jest wiele rozwiązań, Wszystko zależy od tego w czym pracuje Ci się wygodniej (o ile jakiś sposób znacząco nie wpływa na wydajność lub jest przestarzały)

Czy na pewno 2 contenty?
<nav id="navbar">
  <div id="logo">
    <div id="logo-1" class="visible-xs visible-sm">
      //tu logo dla xs i sm
    </div>
    <div id="logo-2" class="visible-md visible-lg">
      //tu logo dla md i lg
    </div>
  </div>
  <div id="navigation">
  	...
  </div>
</nav>
Ad. 3,4. Pracować możesz jak chcesz, na wydajność (a raczej obciążenie) wpłynie ale w bardzo bardzo niskim stopniu (przy podstawowym ruchu na stronie - niezauważalnym).

I oczywiście, że możesz (a nawet powinienieś) pracować tak aby to Tobie było najwygodniej. Istnieje wiele programów (a nawet konwerterów online), dzięki którym po zakończonej pracy wrzucasz do nich wszystkie pliki, a one automatycznie łączą go w 1.

Możesz też używać widocznych komentarzy (później ewentualnie przepuścić przez jakiś program, który minimalizuje plik, ale to nie jest konieczne)
/*#############################*/
/*                             */
/*           Nagłówek          */
/*                             */
/*#############################*/

#navbar {
  ...
}
#navbar ol {
  ...
}
#logo-1 {
  ...
}
#logo-2 {
  ...
}

/*#############################*/
/*                             */
/*            Stopka           */
/*                             */
/*#############################*/

footer {
  ...
}
footer div {
  ...
}
footer div p {
  ...
}
footer div p span {
  ...
}
//Czemu kolor komentarzy w kodzie źródłowym jest taki sam jak id CSS? xD

Wyczerpujące i konkretne odpowiedzi to co lubię.

W zasadzie na początku kodziłem w Notepadzie++, jednak nastąpiła przesiadka na Brackets'a ponieważ ułatwia i przyśpiesza pracę.

Na razie jeśli chodzi o tego bootstrapa używam klas hidden i wykonuje w indexie sablon dla lg, md i osobny dla sm, xs.

A całkiem fajnie to się robi, bo wystarczy, że nadam containerowi pare klas i już nie musze przy żadnym ustawiać widoczności

<div class="container hidden-sm hidden-xs">
  Wszystkie divy, które się znajdują tutaj znikają jeśli tylko przekroczą rodzielczość dla col-md-*
</div>

Całkiem praktyczne i mało pracochłonne rozwiązanie, jednak nie wyklucza ono tego, że niebawem zaczynam się brać za Less. Podobnież jest całkiem łatwy

Zaloguj się

👋 Witaj na MPCForum!

Bootstrap inne style na różnych rozdzielczościach

Rekomendowane odpowiedzi

Bóbr.

Bóbr.

Latreso

Latreso

Bóbr.

Bóbr.

Latreso

Latreso

Bóbr.

Bóbr.

Zarchiwizowany